<template>
    
        <div class="grid-content bg-purple-light">
            <div v-if="isEmpty ===true"> 成绩还未发布</div>
            
            <div v-if="isEmpty ===false">
                获奖作品
                <el-table :data="tableData" style="width: 100%" height="500" border>
                    <el-table-column fixed type="index" >
                    </el-table-column>
                    <el-table-column prop="prjConid" label="参赛者Id" >
                    </el-table-column>
                    <el-table-column prop="prjRealname" label="真实作品名" >
                    </el-table-column>
                    <el-table-column prop="prjUrl" label="作品链接" >
                        <template slot-scope="scope">
                            <el-link :href="scope.row.prjUrl">下载文件</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="prjFinalscore" label="得分" >
                    </el-table-column>
                
                </el-table>
            </div>
            
            
        </div>
</template>

<script lang="js">

    export default {

        data() {
            return {
                tableData: [],
                isEmpty:true,
            };
        },
        methods: {
            
            async passfinalPrj() {
                await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/project/passfinalPrj",
                }).then(res => {
                    if (res.data.code ===1 && res.data.data.length!=0) {
                        this.tableData = res.data.data;
                        this.isEmpty = false;
                    }else{
                        this.isEmpty = true;
                    }

                })
            },

        },
        async mounted() {
            try {
                
                await this.passfinalPrj();
               
            } catch (error) {
                console.log('Error During mount:', error)
            }

        },
    }
</script>
<style>
    .distribution_row {
        display: flex;
        align-items: stretch;
        margin-top: 5%;
    }

    .el-statistic .con {
        margin-top: 10px !important;
        color: #f33f3f !important;
    }

    .el-statistic .con .number {
        font-size: 22px !important;

    }

    .el-statistic .con .suffix {
        font-size: 20px !important;

    }

    .el-statistic .head .title {
        margin-bottom: 8px !important;
        color: #606266 !important;
        font-size: 16px !important;
    }
</style>